<template>
	<view class="">
		<view class="exchange_bg">
			<view class="jui_bg_fff jui_lrtop box   ">
				<view class="  jui_mar_b20" style="width: 100%;border-radius: 16rpx;" :class="tabindex==index?'bg_lighy_purple':'jui_bg_f5f'" v-for="(item,index) in list" :key="index"  @tap="chooseSetMeal(item,index)">
					<view class="tuijian" v-if="item.showswitch == 1">
						<image src="/static/imgs/home/tuijian.png" style="width: 180rpx;height: 48rpx;" mode=""></image>
						<view class="">
							推荐
						</view>
					</view>
					<view class="jui_pad_2432">
						<view class="jui_flex jui_flex_justify_between jui_flex_items_center jui_mar_t12 jui_mar_b20">
							<view class="jui_flex jui_flex_items_center">
								<image src="/static/imgs/home/zuanshi.png" style="width: 32rpx;height: 30rpx;" mode=""></image>
								<view class="jui_fc_333 jui_mar_l20 jui_fs24">
									{{item.name}}
								</view>
							</view>
							<view class="jui_fc_666 jui_fs28">
								有效期：{{item.valid_period}}
							</view>
						</view>
						<view class="jui_flex jui_flex_justify_between jui_flex_items_center jui_mar_b20 jui_pad_t16">
							<view class="">
								{{item.task_num}}
							</view>
							<view class="zhusecol">
								{{item.money}}
							</view>
						</view>
						<view class="jui_flex jui_flex_justify_between jui_flex_items_center">
							<view class="jui_fc_666 jui_fs24 " style="width: 70%;">
								{{item.description}}
							</view>
							<view class="zhuse jui_fc_fff buy_btn" @tap="buy(item,index)">
								购买
							</view>
						</view>
					</view>
					
				</view>
				<!-- <shopro-empty v-if="!list.length" :emptyData="emptyData"></shopro-empty> -->
			</view>
		</view>
		<!-- 输入支付密码 -->
		<view class="pay-password" v-if="flag">
			<view class="pwd-bg"></view>
			<view class="pwd-box">
				<view class="tit">
					<image src="/static/imgs/back1.png" style="height: 24rpx;width: 20rpx;"  @click="hide"></image>
					<text>输入支付密码</text>
				</view>
				<view class="pwd-list">
					<view>{{ password.length >= 1 ? '●' : '' }}</view>
					<view>{{ password.length >= 2 ? '●' : '' }}</view>
					<view>{{ password.length >= 3 ? '●' : '' }}</view>
					<view>{{ password.length >= 4 ? '●' : '' }}</view>
					<view>{{ password.length >= 5 ? '●' : '' }}</view>
					<view>{{ password.length >= 6 ? '●' : '' }}</view>
				</view>
				<view class="pwd-link"><navigator :url="payUrl">忘记支付密码？</navigator></view>
				<view class="pwd-keys">
					<view @click="keysOn(1)">1</view>
					<view @click="keysOn(2)">2</view>
					<view @click="keysOn(3)">3</view>
					<view @click="keysOn(4)">4</view>
					<view @click="keysOn(5)">5</view>
					<view @click="keysOn(6)">6</view>
					<view @click="keysOn(7)">7</view>
					<view @click="keysOn(8)">8</view>
					<view @click="keysOn(9)">9</view>
					<view class="no-bg"></view>
					<view @click="keysOn(0)">0</view>
					<view class="no-bg" @click="keysOn('del')"><image class="iconfont slj-iconfontcha" src="@/static/imgs/delBtn.png" alt=""></image></view>
				</view>
			</view>
		</view>
		<!-- 输入支付密码end -->
	</view>
</template>

<script>
	import vNavigation from '@/components/navigation/navigation.vue'
	export default {
		components: {
			vNavigation
		},
		data(){
			return {
				emptyData: {
					img: '/static/imgs/home/empty_goods.png',
					tip: '暂无数据~'
				},
				naviValue :{
					"l":'/static/imgs/home/back.png',
					"c":'购买套餐',
					"r":'购买记录',
					url:'/pages/index/setMeal/order'
				},
				list:[],
				password: [],
				flag: false,
				payUrl:'/pages/index/set/changePayPsd',
				buyDeatil:'',
				tabindex:1,
				meal_id:''
			}
		},
		onShow() {
			this.getFromToken();
		},
		methods:{
			getFromToken() {
				this.$api.getFromToken({data:1}).then(res => {
					if (res.code == 1) {
						this.FromToken = res.FromToken;
						this.getMeal()
					}
				});
			},
			getMeal(){
				let data = {
					FromToken:this.FromToken
				}
				this.$api.getMeal(data).then(res => {
					if (res.code == 1) {
						this.list = res.data.meal;
						this.list.forEach((item,index)=>{
							if(item.showswitch){
								this.tabIndex = index;
								this.meal_id = item.id
							}
						})
					}
				});
			},
			// 输入密码
			async keysOn(key) {
				var $this = this;
				let that = this;
				if (key != 'del') {
					if ($this.password.length < 6) {
						$this.password.push(key);
						if ($this.password.length == 6) {
							// 密码输入完成
							var paypsd = $this.password.join('');
						
							var data = {
								id: that.meal_id,
								// buy_num: 1,
								safe_pwd:paypsd
							};
							
							that.$api.buyMeal(data).then(res => {
								if (res.code == 1) {
									that.$msg(res.msg)
									that.flag = false;
									this.password = []
									setTimeout(function(){
										uni.navigateBack()
									},800)
								}
								if (res.code == 0) {
									that.$msg(res.msg)
									that.flag = false;
									this.password = []
								}
							});
						}
					}
				} else {
					$this.password.pop();
				}
			},
			chooseSetMeal(item,index){
				this.tabindex = index;
				this.meal_id = item.id;
				console.log(this.tabIndex,this.meal_id)
			},
			hide() {
				var $this = this;
				$this.flag = false;
				$this.password = [];
			},
			buy(item,index){
				this.meal_id = item.id;
				this.tabindex = index
				this.flag = true;
			},
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}
	.zhuse {
		background-color: $zhuse;
	}
	.zhusecol{
		color: $zhuse;
	}
	.bg_lighy_purple {
		background-color: rgba($color:$zhuse, $alpha: 0.2);
		// background-color: $col-light-purple;
	}
	
	.exchange_bg {
		background:$zhuse;
		.box {
			padding: 70rpx 30rpx 0 30rpx;
			flex-wrap: wrap;
		}
	}
	.topPlace {
		width: 100%;
		height: var(--status-bar-height);
		background: $zhuse;
		
	}
	.buy_btn {
		padding: 10rpx 36rpx;
		border-radius: 8rpx;
	}
	.tuijian {
		position: relative;
		view{
			position: absolute;
			top: 4rpx;
			left: 60rpx;
			color: #FFFFFF;
		}
	}
	.pay-btn {
		width: 690rpx;
		height: 80rpx;
		background: $zhuse!important;
		// background: linear-gradient(90deg, rgba(240, 199, 133, 1), rgba(246, 214, 157, 1));
		border-radius: 40rpx;
		color: rgba(#fff, 0.9);
		margin-top: 100rpx;
	}
	.pwd-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
	}
	.pwd-box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 410px;
		background: #fff;
		color: #333;
		z-index: 999;
		.tit {
			display: flex;
			align-items: center;
			image {
				width: 20px;
				height: 20px;
				margin-left: 4%;
			}
			text {
				text-align: center;
				font-size: 18px;
				padding: 22px;
				flex: 1;
			}
		}
		.pwd-list {
			overflow: hidden;
			padding: 0 22px;
			display: flex;
			align-items: center;
			view {
				flex: 1;
				height: 50px;
				line-height: 50px;
				font-size: 30upx;
				background: #fff;
				border: 1px #f0f0f0 solid;
				border-left: none;
				text-align: center;
			}
			view:first-child {
				margin-left: 0;
				border-left: 1px #f0f0f0 solid;
			}
		}
		.pwd-link {
			margin-top: 10px;
			text-align: right;
			color: #7f8389;
			font-size: 28upx;
			padding: 0 22px;
		}
		.pwd-keys {
			width: 100%;
			background: #d1d5db;
			height: 225px;
			position: absolute;
			bottom: 0;
			padding-top: 5px;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			view {
				text-align: center;
				margin: 0 0 5px 5px;
				margin-top: 0;
				width: calc((100% - 20px) / 3);
				height: 50px;
				line-height: 50px;
				background: #fff;
				border-radius: 5px;
				border-bottom: 1px #999 solid;
				font-size: 36upx;
			}
			view.no-bg {
				background: none;
				border: none;
				// i{ font-size: @fontsize + 7;}
				image {
					width: 30px;
					height: 40upx;
				}
			}
			view:active {
				background: #f0f0f0;
			}
		}
	}
</style>
